import React, { FC } from 'react';
import { FormInstance } from 'antd/lib/form';
import ProTable, { ProColumns } from '@/components/ProTable';
import useCardModel from '@/pages/Card/useCardModel';
import { CardTypeReturnType } from '@/pages/Card/API';
import { useUnmount } from 'ahooks';

const AddForm: FC<{ formRef: React.MutableRefObject<FormInstance | undefined> }> = ({
  formRef,
}) => {
  const { cardTypeList = [] } = useCardModel((model) => [model.cardTypeList]);
  useUnmount(() => {
    formRef.current?.resetFields();
  });

  //List转换枚举
  const cardTypeListEnum = cardTypeList.reduce(
    (pre: { [key: number]: { text: string } }, item: { name: string; typeId: number }) => {
      pre[item.typeId] = { text: item.name };
      return pre;
    },
    {},
  );

  const columns: ProColumns<CardTypeReturnType>[] = [
    {
      title: '卡号:',
      rules: [
        {
          required: true,
        },
      ],
      dataIndex: 'cardNo',
    },
    {
      title: '卡片类型:',
      rules: [
        {
          required: true,
        },
      ],
      dataIndex: 'cardType',
      valueEnum: cardTypeListEnum,
    },
    {
      title: '备注:',
      dataIndex: 'rec',
      valueType: 'textarea',
    },
  ];

  return (
    <>
      <ProTable<CardTypeReturnType>
        form={{ layout: 'vertical', autoComplete: 'off' }}
        columns={columns}
        type={'form'}
        formRef={formRef}
      />
    </>
  );
};
export default AddForm;
